<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lof BreakingNews Plugin - Mootool 1.1</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script language="javascript" type="text/javascript" src="js/mootools.svn.js"></script>
<script language="javascript" type="text/javascript" src="js/lofbreakingnews_mt1.1.js"></script>

</head>

<body>
	<div id="container">
    		<h1><strong>LofBreakingNews 1.0</strong> - Scroll news - Mootool 1.1</h1>
       
 <p>
	<strong> Direction: Right to Left </strong> 
</p>       
<!-------------------- DEMO 1 ------------------------------------->
        
<div id="lofbreakingnews_1" class="lof-breakingnews lof-layout-hrleft">
    <!-- BUTTONS DRIVEN -->  
  <div class="lof-module-nav">
     <div class="lof-module-title">Demo 1:</div>
     <div class="lof-button-driven"> 
       <a href="/" onclick="return false;" class="lof-button-previous"><span>PREVIOUS</span></a> 
       <a href="/" onclick="return false;" class="lof-button-next"><span>Next</span></a> 
      </div>
  </div>
    <!-- BUTTONS DRIVEN -->
  <!-- MAIN CONTENT -->
  <div class="lof-breakingnews-wrapper" >
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/6-we-are-volunteers.html" title="We are Volunteers">We are Volunteers</a> 
    </div>
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/9-millions-of-smiles.html" title="Millions of Smiles">Millions of Smiles</a> 
     </div>
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/44-joomla-security-strike-team.html" title="Joomla! Security Strike Team">Joomla! Security Strike Team</a> 
     </div>
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/45-joomla-community-portal.html" title="Joomla! Community Portal">Joomla! Community Portal</a> 
     </div>
  </div>
    <!-- END MAIN CONTENT -->
</div>
<script type="text/javascript">
	var _lofmain =  $('lofbreakingnews_1');
	var _button  =  {next:_lofmain.getElement('.lof-button-next'), previous :_lofmain.getElement('.lof-button-previous')};

	new LofBreakingNews( _lofmain, { interval:4000,
									 layoutStyle:'hrleft',
									 fxObject:{ transition:Fx.Transitions.Expo.easeInOut, duration:400 } } 
	).registerButtonsControl( 'click',_button ).start( true );
</script>
   <!-------------------- END DEMO 1 ------------------------------------->

<!-------------------- DEMO 2- Direction: Left to Right ------------------------------------->
<p>
	<strong> Direction: Left to Right </strong>
</p>
<div id="lofbreakingnews_2" class="lof-breakingnews lof-layout-hrright">
    <!-- BUTTONS DRIVEN -->  
  <div class="lof-module-nav">
     <div class="lof-module-title">Demo 2:</div>
     <div class="lof-button-driven"> 
       <a href="/" onclick="return false;" class="lof-button-previous"><span>PREVIOUS</span></a> 
       <a href="/" onclick="return false;" class="lof-button-next"><span>Next</span></a> 
      </div>
  </div>
    <!-- BUTTONS DRIVEN -->
  <!-- MAIN CONTENT -->
  <div class="lof-breakingnews-wrapper" >
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/6-we-are-volunteers.html" title="We are Volunteers">We are Volunteers</a> 
    </div>
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/9-millions-of-smiles.html" title="Millions of Smiles">Millions of Smiles</a> 
     </div>
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/44-joomla-security-strike-team.html" title="Joomla! Security Strike Team">Joomla! Security Strike Team</a> 
     </div>
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/45-joomla-community-portal.html" title="Joomla! Community Portal">Joomla! Community Portal</a> 
     </div>
  </div>
    <!-- END MAIN CONTENT -->
</div>
<script type="text/javascript">
	var _lofmain =  $('lofbreakingnews_2');
	var _button  =  {next:_lofmain.getElement('.lof-button-next'), previous :_lofmain.getElement('.lof-button-previous')};

	new LofBreakingNews( _lofmain, { interval:3000,
									 layoutStyle:'hrright',
									 fxObject:{ transition:Fx.Transitions.Bounce.easeOut, duration:700 } } 
	).registerButtonsControl( 'click',_button ).start( true );
</script>
   <!-------------------- END DEMO 2 ------------------------------------->
   
<!-------------------- DEMO 3 ------------------------------------->
<p><strong> Direction: Down to Up </strong></p>
<div id="lofbreakingnews_3" class="lof-breakingnews lof-layout-vrup">
    <!-- BUTTONS DRIVEN -->  
  <div class="lof-module-nav">
     <div class="lof-module-title">Demo 3:</div>
     <div class="lof-button-driven"> 
       <a href="/" onclick="return false;" class="lof-button-previous"><span>PREVIOUS</span></a> 
       <a href="/" onclick="return false;" class="lof-button-next"><span>Next</span></a> 
      </div>
  </div>
    <!-- BUTTONS DRIVEN -->
  <!-- MAIN CONTENT -->
  <div class="lof-breakingnews-wrapper" >
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/6-we-are-volunteers.html" title="We are Volunteers">We are Volunteers</a> 
    </div>
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/9-millions-of-smiles.html" title="Millions of Smiles">Millions of Smiles</a> 
     </div>
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/44-joomla-security-strike-team.html" title="Joomla! Security Strike Team">Joomla! Security Strike Team</a> 
     </div>
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/45-joomla-community-portal.html" title="Joomla! Community Portal">Joomla! Community Portal</a> 
     </div>
  </div>
    <!-- END MAIN CONTENT -->
</div>
<script type="text/javascript">
	var _lofmain =  $('lofbreakingnews_3');
	var _button  =  {next:_lofmain.getElement('.lof-button-next'), previous :_lofmain.getElement('.lof-button-previous')};

	new LofBreakingNews( _lofmain, { interval:4000,
									 layoutStyle:'vrup',
									 fxObject:{ transition:Fx.Transitions.Pow.easeOut, duration:500 } } 
	).registerButtonsControl( 'click',_button ).start( true );
</script>
   <!-------------------- END DEMO 3 ------------------------------------->
   
   <!-------------------- DEMO 4 ------------------------------------->
<p><strong> Direction: Up to Down </strong></p>
<div id="lofbreakingnews_4" class="lof-breakingnews lof-layout-vrdown">
    <!-- BUTTONS DRIVEN -->  
  <div class="lof-module-nav">
     <div class="lof-module-title">Demo 4:</div>
     <div class="lof-button-driven"> 
       <a href="/" onclick="return false;" class="lof-button-previous"><span>PREVIOUS</span></a> 
       <a href="/" onclick="return false;" class="lof-button-next"><span>Next</span></a> 
      </div>
  </div>
    <!-- BUTTONS DRIVEN -->
  <!-- MAIN CONTENT -->
  <div class="lof-breakingnews-wrapper" >
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/6-we-are-volunteers.html" title="We are Volunteers">We are Volunteers</a> 
    </div>
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/9-millions-of-smiles.html" title="Millions of Smiles">Millions of Smiles</a> 
     </div>
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/44-joomla-security-strike-team.html" title="Joomla! Security Strike Team">Joomla! Security Strike Team</a> 
     </div>
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/45-joomla-community-portal.html" title="Joomla! Community Portal">Joomla! Community Portal</a> 
     </div>
  </div>
    <!-- END MAIN CONTENT -->
</div>
<script type="text/javascript">
	var _lofmain =  $('lofbreakingnews_4');
	var _button  =  {next:_lofmain.getElement('.lof-button-next'), previous :_lofmain.getElement('.lof-button-previous')};

	new LofBreakingNews( _lofmain, { interval:3000,
									 layoutStyle:'vrdown',
									 fxObject:{ transition:Fx.Transitions.Bounce.easeOut, duration:700 } } 
	).registerButtonsControl( 'click',_button ).start( true );
</script>
   <!-------------------- END DEMO 4 ------------------------------------->
   
     <!-------------------- DEMO 5 ------------------------------------->
<p><strong> Direction: Up to Down </strong></p>
<div id="lofbreakingnews_5" class="lof-breakingnews lof-layout-opacity">
    <!-- BUTTONS DRIVEN -->  
  <div class="lof-module-nav">
     <div class="lof-module-title">Demo 5:</div>
     <div class="lof-button-driven"> 
       <a href="/" onclick="return false;" class="lof-button-previous"><span>PREVIOUS</span></a> 
       <a href="/" onclick="return false;" class="lof-button-next"><span>Next</span></a> 
      </div>
  </div>
    <!-- BUTTONS DRIVEN -->
  <!-- MAIN CONTENT -->
  <div class="lof-breakingnews-wrapper" >
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/6-we-are-volunteers.html" title="We are Volunteers">We are Volunteers</a> 
    </div>
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/9-millions-of-smiles.html" title="Millions of Smiles">Millions of Smiles</a> 
     </div>
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/44-joomla-security-strike-team.html" title="Joomla! Security Strike Team">Joomla! Security Strike Team</a> 
     </div>
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/45-joomla-community-portal.html" title="Joomla! Community Portal">Joomla! Community Portal</a> 
     </div>
  </div>
    <!-- END MAIN CONTENT -->
</div>
<script type="text/javascript">
	var _lofmain =  $('lofbreakingnews_5');
	var _button  =  {next:_lofmain.getElement('.lof-button-next'), previous :_lofmain.getElement('.lof-button-previous')};

	new LofBreakingNews( _lofmain, { interval:3000,
									 layoutStyle:'opacity',
									 fxObject:{ transition:Fx.Transitions.Bounce.easeInOut, duration:700 } } 
	).registerButtonsControl( 'click',_button ).start( true );
</script>
   <!-------------------- END DEMO 5 ------------------------------------->
   
    <!-------------------- DEMO 5 ------------------------------------->
<p><strong> Direction: Up to Down </strong></p>
<div id="lofbreakingnews_6" class="lof-breakingnews">
  <!-- MAIN CONTENT -->
  <div class="lof-breakingnews-wrapper" >
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/6-we-are-volunteers.html" title="We are Volunteers">We are Volunteers</a> 
    </div>
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/9-millions-of-smiles.html" title="Millions of Smiles">Millions of Smiles</a> 
     </div>
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/44-joomla-security-strike-team.html" title="Joomla! Security Strike Team">Joomla! Security Strike Team</a> 
     </div>
    <div class="lof-breakingnew-item"> 
    	<a target="_parent" href="/joomla-extensions/45-joomla-community-portal.html" title="Joomla! Community Portal">Joomla! Community Portal</a> 
     </div>
  </div>
    <!-- END MAIN CONTENT -->
</div>
<script type="text/javascript">
	var _lofmain =  $('lofbreakingnews_6');
	new LofBreakingNews( _lofmain, { interval:3000,
									 fxObject:{ transition:Fx.Transitions.Bounce.easeInOut, duration:700 } } 
	).start( true ); // is true: auto start
</script>
   <!-------------------- END DEMO 5 ------------------------------------->

 <p> <a href="http://landofcoder.com/opensource/mootool/77-the-breakingnews-plug-in.html">Back</a> | <a href="index2.html">Demo with mootool 1.2</a> </p>
    </div>
</body>
</html>
